<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>忘记密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css?v=${@date.getDateTime()}" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 25%;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 75%;
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }
    </style>
</head>
<body style="background: white;">


<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">忘记密码</h1>
</header>
    <div class="mui-content" id="vue">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input id='account' type="tel" v-model="mobile" class=" mui-input" placeholder="请输入账号">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input id='password' type="password" v-model="password" class=" mui-input" placeholder="请输入密码">
            </div>
            <div class="mui-input-row">
                <label>确认</label>
                <input id='password_confirm' v-model="password2" type="password" class=" mui-input" placeholder="请确认密码">
            </div>
            <div class="mui-input-row">
                <label>验证码</label>
                <input id='code' type="number" v-model="captcha" class=" mui-input" placeholder="请输入验证码" style="width: 100px;
    float: left;">
                <button id="djCode" v-on:click="getCode" type="button" class="mui-btn mui-btn-primary" style="width: 25%;z-index: 20;">获取验证码</button>
            </div>
            <!--<div class="mui-input-row">-->
            <!--<label>邮箱</label>-->
            <!--<input id='email' type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">-->
            <!--</div>-->
        </form>
        <div class="mui-content-padded">
            <button id='reg' v-on:click="reg" class="mui-btn mui-btn-block mui-btn-primary" style="border-color: rgb(56,206,204);
    background-color: rgb(56,206,204);">重置密码</button>
        </div>
        <div class="mui-content-padded">
            <p></p>
        </div>
    </div>

    <script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
    <script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
    <script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
    <script type="application/javascript">
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });

        var s = true;

        var vue = new Vue({
            el: '#vue',
            data: {
                mobile: '',
                password:'',
                password2:'',
                captcha:''
            },
            created:function () {   //实例初始化创建完成执行



            },
            methods:{
                reg:function () {
                    var self = this;
                    var is=this.parameterCheck();
                    if(!is){
                        return;
                    }

                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/H5/login/resetPassword",
                        dataType:"JSON",
                        data:{
                            mobile:self.mobile,
                            password:self.password,
                            captcha:self.captcha
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                                window.location.href='${base!}/open/H5/login/login.html';
                            } else {
                                //提示
                                layer.open({
                                    content: data.msg
                                    ,skin: 'msg'
                                    ,time: 2 //2秒后自动关闭
                                });
                            }
                        }
                    });

                },
                //定义封装方法
                getCode:function () {
                    if(!isPoneAvailable(this.mobile)){
                        layerAlert("请输入正确手机号");
                        return false;
                    }
                    if(this.password=='' || this.password==null){
                        layerAlert("密码不能为空");
                        return false;
                    }
                    if(this.password2=='' || this.password2==null){
                        layerAlert("确认密码不能为空");
                        return false;
                    }
                    if(this.password2!=this.password){
                        layerAlert("两次密码不一致");
                        return false;
                    }
                    if(!s){
                        return;
                    }

                    if(!s){
                        return;
                    }
                    s=false;
                    var num = 60;
                    function settime() {
                        $("#djCode").html(num + "秒重获取");
                        num--;
                        if(num == 0){
                            $("#djCode").html("获取验证码");
                            s=true;
                            return;
                        }
                        setTimeout(function() {
                            settime();
                        },1000);
                    }


                    settime();
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:"${base!}/open/H5/login/getforgetPasswordMsgCode",
                        dataType:"JSON",
                        data:{
                            mobile:self.mobile
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var d = data.data;
                            } else {
                                //提示
                                layer.open({
                                    content:data.msg
                                    ,skin: 'msg'
                                    ,time: 2 //2秒后自动关闭
                                });
                            }
                        }
                    });

                },
                parameterCheck:function () {
                    if(!isPoneAvailable(this.mobile)){
                        layerAlert("请输入正确手机号");
                        return false;
                    }
                    if(this.password=='' || this.password==null){
                        layerAlert("密码不能为空");
                        return false;
                    }
                    if(this.password2=='' || this.password2==null){
                        layerAlert("确认密码不能为空");
                        return false;
                    }
                    if(this.password2!=this.password){
                        layerAlert("两次密码不一致");
                        return false;
                    }
                    if(this.captcha=='' || this.captcha==null){
                        layerAlert("验证码不能为空");
                        return false;
                    }
                    return true;
                }
            },

            watch:{     //监听器
                // carModel:function () {
                //     this.getProvince();
                // }
            }

        })

        //手机号校验
        function isPoneAvailable(mobile) {
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(mobile)) {
                return false;
            } else {
                return true;
            }
        }
        function layerAlert(msg) {
            //提示
            layer.open({
                content: msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
        }

    </script>
</body>
</html>
